<template>
  <div class="uotBox">
    <!--养宠达人  BOX-->
    <div class="expert">
      <!--标签行-->
      <LabelTiter
        titer="养宠达人"
        border-left-color="#ff976ac7"
        routerLink="authorTable"
      />
      <!--内容行-->
      <div class="listShow">
        <Expert />
      </div>
    </div>
    <!--人气推荐  BOX-->
    <div class="popular">
      <LabelTiter routerLink="petTable" />
      <div class="listShow">
        <HomeListItem
          v-for="item in recommendList"
          :key="item.pet_id"
          :recommendList="item"
          @click="handlePetDetails(item.pet_id)"
        />
      </div>
    </div>
    <!--常用工具  BOX-->
    <!--    <div class="commonTools">-->
    <!--      <LabelTiter titer="常用工具" border-left-color="#07c16096" />-->
    <!--      <div class="listShow">-->
    <!--        <HomeListItem />-->
    <!--        <HomeListItem />-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import LabelTiter from "@/components/LabelTiter";
import Expert from "@/views/home/component/Expert";
import HomeListItem from "@/views/home/component/HomeListItem";
import { getRecommend } from "@/api/home";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "RecommendList",
  setup() {
    //推荐区
    const { recommendList, getRecommendList } = handleGetRecommend();
    getRecommendList();
    //宠物详情跳转
    const router = useRouter();
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    return { recommendList, handlePetDetails };
  },
  components: { HomeListItem, Expert, LabelTiter },
};
//获取人气推荐列表数据
function handleGetRecommend() {
  const recommendList = ref([]);
  const getRecommendList = () => {
    getRecommend(4).then((res) => {
      // console.log(res);
      recommendList.value = res.data;
    });
  };
  return { getRecommendList, recommendList };
}
</script>

<style scoped lang="less">
.uotBox {
  margin-top: 1rem;
  background-color: #fff;
}
.popular,
.expert,
.commonTools {
  margin-bottom: 1rem;
}
.listShow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 0.5rem;
}
</style>
